<template>
  <div id="Register">
    <TopA></TopA>
    <el-row class="re-header">
      <el-col :span="24">
        <el-page-header @back="goBack" content="用户注册" class="header-adjustment">
        </el-page-header>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" class="adjustment body-box">
      <el-col :span="10">
        <div class="top-box">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="16">
              <div class="top-box-title">用户注册</div>
            </el-col>
          </el-row>
        </div>
        <el-row type="flex" justify="center" class="form-box">
          <el-col :span="16">
            <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm">
              <el-form-item label="用户名" class="form-item-adjustment" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="password_suer">
                <el-input type="password" v-model="ruleForm.password_suer" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="默认交易地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
              </el-form-item>
            </el-form>
            <div class="adjustment-bottom"><button class="summit-button" v-on:click="submit('ruleForm')">注册</button></div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TopA from "../components/TopA";
export default {
  name: "Register",
  components: {TopA},
  data() {
    let validatename = (rule,value,callback)=>{
      if (value===''){
        callback(new Error('用户名不能为空'))
      }else{
        callback();
      }
    };
    let validateaddress = (rule,value,callback)=>{
      if (value===''){
        callback(new Error('地址不能为空'))
      }else{
        callback();
      }
    };
    var validatephone = (rule, value, callback) => {
      if (value.length !== 11) {
        callback(new Error("电话必须为11位数字"));
      } else {
        let f = false
        for (let i = 0;i<=value.length;i++){
          if ( value[i] > '9' || value[i] < '0' ){//数字以外
            f = true
          }
        }
        if ( f ){
          callback(new Error("电话必须为11位数字"));
        }else{
          callback();
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        // var strength = 0
        // if(value.length>=8) strength=1//密码强度必须大于9位且至少包含一种字母
        //
        // function hasLetter(str) {
        //   for (var i in str) {
        //     var asc = str.charCodeAt(i);
        //     if ((asc >= 65 && asc <= 90 || asc >= 97 && asc <= 122)) {//若有字母
        //       return true;
        //     }
        //   }
        //   return false;
        // }
        //
        // if (hasLetter(value)) strength = strength+1
        // if (strength!==2)
        //   callback(new Error('密码长度必须大于8位且至少包含一个字母'))
        // if (this.ruleForm.password_suer !== '') {
        //   this.$refs.ruleForm.validateField('checkPass');
        // }


        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: '',
        password: '',
        password_suer: '',
        phone: '',
        address: ''
      },
      rules: {
        name:[{validator:validatename,trigger:'blur'}],
        password:[{validator:validatePass,trigger:'blur'}],
        password_suer:[{validator:validatePass2,trigger:'blur'}],
        phone:[{validator:validatephone,trigger:'blur'}],
        address:[{validator:validateaddress,trigger:'blur'}]
      }
    }
  },
  methods: {
    goBack: function () {
      this.$router.push({
        path: '/home_A'
      })
    },
    submit: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.user.insertUser({
            password: this.ruleForm.password,
            password_suer: this.ruleForm.password_suer,
            phone: this.ruleForm.phone,
            transactionAddress: this.ruleForm.address,
            username: this.ruleForm.name
          }).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              this.$message({
                message: "注册成功",
                type: "success"
              })
              this.$router.push({
                path: '/loginA'
              })
            } else if (res.data.code === 500) {
              if (res.data.data.username!==null){
                this.$message({
                  type:'warning',
                  message:res.data.data.username
                })
                this.ruleForm.name=null;
                this.ruleForm.password = null;
                this.ruleForm.password_suer=null;
              }else{
                this.$message({
                  type:'warning',
                  message:'密码长度应大于8位且至少包含两种字符'
                })
                this.ruleForm.password = null;
                this.ruleForm.password_suer=null;
              }
            }
          })
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
#Register {

}
.body-box {
  border-radius: 12px;
}
.header-adjustment {
  padding-top: 100px;
}
.adjustment {
  padding-top: 150px;
}
.form-box {
  border: 5px solid #B0E0E6;
  border-radius: 0 0 12px 12px;
}
.top-box {
  height: 60px;
  background: #B0E0E6;
  border-radius: 12px 12px 0 0;
}
.form-item-adjustment {
  padding-top: 20px;
}
.re-header {
  position: fixed;
  z-index: 2000;
}
.summit-button {
  color: white;
  font-size: 24px;
  background: #B0E0E6;
  border-color: #B0E0E6;
  width: 100%;
  height: 60px;
  outline: none;
  border-radius: 12px;
}
.summit-button:hover {
  background: rgba(176, 224, 230, 0.8);
}
.adjustment-bottom {
  padding-bottom: 20px;
}
.top-box-title {
  color: white;
  font-size: 40px;
  font-weight: bold;
}
/deep/ .el-form-item__label {
  font-size: 30px;
}
/deep/ .el-page-header {
  font-size: 24px;
}
/deep/ .el-page-header__title {
  font-size: 36px;
}
/deep/ .el-page-header__content {
  font-size: 36px;
}
/deep/ .el-page-header__left::after {
  height: 40px;
  width: 5px;
  color: #B0E0E6;
}
/deep/ .el-icon-back:before {
  font-size: 30px;
}

</style>
